
import type { FormProps } from 'antd';
import { Button, Form, Input, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import './Login.css'

export default function Login() {
  type FieldType = {
    username?: string;
    password?: string;
    remember?: boolean;
  };

  const navigate = useNavigate();
  const location = useLocation();

  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    console.log('Success:', values);
    // 模拟登录API请求
    setTimeout(() => {
      localStorage.setItem('token', 'fake-auth-token');
      const { from } = location.state || { from: { pathname: '/layout' } };
      navigate(from.pathname);
    }, 500);
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className="login-container">
      <div className="login-background">
        <img src="/src/assets/bg.png" alt="" />
      </div>
      <div className="login-form-wrapper">
        <Card className="login-card" title="振涛教育在线平台" variant="outlined">
          <Form
            name="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item<FieldType>
              name="username"
              label=""
              rules={[
                { required: true, message: '请输入您的账号!' },
                { whitespace: true, message: '账号不能为空!' }
              ]}
            >
              <Input
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="请输入账号"
              />
            </Form.Item>

            <Form.Item<FieldType>
              name="password"
              label=""
              rules={[
                { required: true, message: '请输入您的密码!' },
                { whitespace: true, message: '密码不能为空!' }
              ]}
            >
              <Input.Password
                prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="请输入密码"
              />
            </Form.Item>

            <Form.Item className="login-button-wrapper">
              <Button type="primary" htmlType="submit" className="login-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  );
}
